因為做的是寵物定位分享平台，地圖上出現太多雜訊會影響使用體驗。

Google Map API 有提供在地圖中嵌入 JSON 來客製化地圖顯示的樣式，Using embedded JSON style declarations這裡有詳細的說明。

JSON 物件

要指定特定的地圖樣式，必須將 featureType 和 elementType 以及 stylers 組成一個樣式組合。

• 例如下列的修改是指地圖特徵(features)都變成灰色，然後將主要幹道塗上藍色，並隱藏所有的景觀標籤：

  [
    {
      "featureType": "all",
      "stylers": [
        { "color": "#C0C0C0" }
      ]
    },{
      "featureType": "road.arterial",
      "elementType": "geometry",
      "stylers": [
        { "color": "#CCFFFF" }
      ]
    },{
      "featureType": "landscape",
      "elementType": "labels",
      "stylers": [
        { "visibility": "off" }
      ]
    }
  ]
  

  

• featureType
  選擇要修改的樣式特徵(features)，例如道路、公園、水域等。如果不指定特徵，則選擇所有特徵。

• elementType
  選擇指定特徵的元素。元素是特徵的細部，例如標籤、幾何形狀。如果不指定元素，則選擇該特徵的所有元素。

• stylers
  用於選定的特徵和元素的規則。Stylers 指示特徵的顏色、可見性和權重。可對特徵用一個或多個 styler。

可以從 Style Reference for Maps JavaScript API 查詢更多樣式用法

Create map style

不過這樣一個個修改太麻煩了，Google 也有提供 Create map style 的網站讓你直接手動調整想要的地圖樣式，也可以即時看到調整後的樣式。

右下角的 more options 可以進入更多選項跟細部的調整，也可以調整每個特徵的線條、顏色，甚至是亮度、色彩飽和度等。

調整好按 Finish 就可以拿到 JSON 檔了！

來看看完整的程式碼，這邊我把 JSON 改成 JS 格式，把 key 的雙引號拿掉，然後在 GoogleMap.create 裡面加上 styles: stylesArray 就完成了～

const createMap = async () => {
  const mapRef = document.getElementById("map");
  const coordinates = await Geolocation.getCurrentPosition();
  centerCoordinates.lat = coordinates.coords.latitude;
  centerCoordinates.lng = coordinates.coords.longitude;

  const stylesArray = [
    {
      featureType: "administrative.neighborhood",
      stylers: [{ visibility: "off" }],
    },
    { featureType: "poi.attraction", stylers: [{ visibility: "off" }] },
    {
      featureType: "poi.business",
      stylers: [{ saturation: -100 }, { visibility: "off" }],
    },
    {
      featureType: "poi.government",
      elementType: "geometry",
      stylers: [{ visibility: "off" }],
    },
    { featureType: "poi.medical", stylers: [{ visibility: "off" }] },
    { featureType: "poi.place_of_worship", stylers: [{ visibility: "off" }] },
    { featureType: "poi.school", stylers: [{ visibility: "off" }] },
    { featureType: "poi.sports_complex", stylers: [{ visibility: "off" }] },
    { featureType: "road.highway", stylers: [{ visibility: "off" }] },
    {
      featureType: "road.highway",
      elementType: "geometry.lines",
      stylers: [{ visibility: "off" }],
    },
    { featureType: "transit.station", stylers: [{ visibility: "off" }] },
  ];

  const newMap = await GoogleMap.create({
    id: "my-map",
    element: mapRef,
    apiKey: import.meta.env.VITE_GOOGLE_API_KEY,
    config: {
      center: centerCoordinates,
      zoom: 16,
      disableDefaultUI: true,
      styles: stylesArray, //要加這個！
    },
  });

  const markerId = await newMap.addMarker({
    coordinate: centerCoordinates,
  });
};

最後變這樣，乾乾淨淨剩公園 XD